<template>
  <div>
    <!-- 使用的是字符串的方法 -->
    <div class="basic" :class="str">你好</div>
    <button @click="changeMood('happy')">开心</button>
    <button @click="changeMood('sad')">悲伤</button>
    <button @click="changeMood('normal')">一般</button>
    <hr />
    <!-- 使用对象写法 -->
    <div class="basic" :class="obj">你好</div>
    <button @click="obj.atguigu1=!obj.atguigu1">atguigu1</button>
    <button @click="obj.atguigu2=!obj.atguigu2">atguigu2</button>
    <button @click="obj.atguigu3=!obj.atguigu3">atguigu3</button>
  </div>
</template>

<script>
export default {
  name: "Color",
  data() {
    return {
      // 定义字符串
      str: "",
      // 定义对象
      obj: {
        atguigu1: false,
        atguigu2: false,
        atguigu3: false,
      },
    };
  },
  methods: {
    changeMood(mood) {
      this.str = mood;
    },
  },
};
</script>

<style scoped>
.basic {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}

/* 三种心情，三选一 */
.happy {
  border: 4px solid red;
  background-color: rgba(255, 255, 0, 0.644);
  background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
  border: 4px dashed black;
  background-color: gray;
}
.normal {
  border: 4px solid deepskyblue;
  background-color: skyblue;
}

/* 三个样式，随意选择，可以同时存在 */
.atguigu1 {
  background-color: yellowgreen;
}
.atguigu2 {
  text-shadow: 2px 2px 10px red;
}
.atguigu3 {
  border-radius: 20px;
}
</style>